<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="tabs">
        <text class="tab" :class="{active: currentOrders === 'orders1'}" @click="selectTab('orders1')">全部</text>
        <text class="tab" :class="{active: currentOrders === 'orders3'}" @click="selectTab('orders3')">待支付</text>
        <text class="tab" :class="{active: currentOrders === 'orders2'}" @click="selectTab('orders2')">待使用</text>
        <text class="tab" :class="{active: currentOrders === 'orders4'}" @click="selectTab('orders4')">待评价</text>
      </view>
      <view class="slide-bar" :style="{ left: slidePosition + '%' }"></view>
    </view>
    <!-- 订单列表 -->
    <view class="order-list">
		
      <view class="order-item" v-for="order in getOrders()" :key="order.id">
		  <!-- 订单编号行 -->
        <view class="order-header">
          <text class="order-header-one">订单编号:{{order.number}}</text>
		  <text class="order-header-two">></text>
        </view>
		  <!-- 中间部分(服务项目/服务门店/下单时间) -->
		<view class="order-details">
		  <text class="order-details-one">服务项目: {{order.service}}</text>
		  <text class="order-details-two">服务门店: {{order.store}}</text>
		  <text class="order-details-three">下单时间: {{order.time}}</text>
		  <text class="order-details-four">{{order.status}}</text>
		</view>
		  <!-- 底部行 -->
        <view class="order-footer">
          <text class="order-footer-one">实付: {{order.amount}}元</text>
		  <view class="order-footer-two">
			  <button class="order-btn1" @click="goToDetails1">立即评价</button>
			  <button class="order-btn2" @click="goToDetails2">再来一单</button>
		  </view>
        </view>
      </view>
	  
    </view>
	
  </view>
</template>

<script>
export default {
  data() {
    return {
	  currentOrders:"orders1",
	  slidePosition: 0,
      orders1: [
        { id: 1, number: '24255252522', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待评价' },
        { id: 2, number: '24255252523', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '已取消' },
		{ id: 3, number: '24255252524', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待支付' },
		{ id: 4, number: '24255252525', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待使用' }
      ],
	  orders2: [
	  		{ id: 4, number: '24255252525', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待使用' },
			{ id: 5, number: '24255252526', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待使用' }
	  ],
	
	  orders3: [
		  	{ id: 3, number: '24255252524', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待支付' },
	  ],
	  orders4: [
		    { id: 1, number: '24255252522', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待评价' },
			{ id: 6, number: '24255252527', service: '车辆保养', store: '大宝车辆维修店', time: '2023-03-12 12:09', amount: '230.56', status: '待评价' }
	  ],
    }
  },
  methods:{
    getOrders() {
      return this[this.currentOrders];
    },
	selectTab(tab) {
	      this.currentOrders = tab;
	      this.updateSlidePosition();
	},
	updateSlidePosition() {
	      const index = ['orders1', 'orders3', 'orders2', 'orders4'].indexOf(this.currentOrders);
	      this.slidePosition = index * 25;
	},
	goToDetails1(){
		uni.navigateTo({
			url:'/pages/wb-MyDingDan/DaiPingJiaDetails/DaiPingJiaDetails'
		});
	},
	goToDetails2(){
		uni.navigateTo({
			url:'/pages/wb-MyDingDan/DaiZhiFuDetails/DaiZhiFuDetails'
		});
	},
  }
}
</script>

<style scoped>
	
.container {
  background-color: #f8f8f8;
}
.nav-bar {
  background-color: #007aff;
  color: white;
  padding: 10px;
}
.nav-title {
  font-size: 18px;
  text-align: center;
}
.tabs {
  display: flex;
  justify-content: space-around;
}
.tab {
  color: white;
  font-size: 16px;
}
.active {
  font-weight: bold;
}
.slide-bar {
  position: absolute;
  bottom: 0;
  height: 3px;
  width: 25%;
  background-color: red;
  transition: left 0.3s ease;
}
.order-list {
  padding: 10px;
  height: 1800rpx;
}
.order-item {
  background-color: #FFFFFF;
  margin-bottom: 10px;
  padding: 10px;
  border-radius: 5px;
  border-bottom: #BFBFBF solid 3rpx;
}
.order-btn1 {
  background-color: #BFBFBF;
  color: white;
  border: none;
  border-radius: 5px;
  width: 180rpx;
  height: 60rpx;
  padding-left: 30rpx;
  float: left;
  font-size: 30rpx;
  text-align: center;
  margin-top: 25rpx;
  margin-left: 15rpx;
  line-height: 60rpx;
}
.order-btn2 {
  background-color: #007aff;
  color: white;
  border: none;
  border-radius: 5px;
  width: 180rpx;
  height: 60rpx;
  padding-right: 30rpx;
  float: right;
  font-size: 30rpx;
  margin-top: 25rpx;
  margin-right: 15rpx;
  line-height: 60rpx;
}


/* 设置 */
.order-header{
	/* background-color: #ff6600; */
	height: 70rpx;
	line-height: 70rpx;
	border-bottom: #F7F7F7 5rpx solid;
}
.order-details {
  background-color: deepskyblue;
  height: 210rpx;
  border-bottom: #F7F7F7 5rpx solid;
  position: relative; /* 确保相对定位 */
}
.order-footer{
	background-color: green;
	height: 120rpx;
}
.order-header-one{
	/* background-color: #007aff; */
	display: block;
	width: 60%;
	float: left;
	border-bottom: #F7F7F7 5rpx solid;
}
.order-header-two{
	background-color: greenyellow;
	display: block;
	width: 40%;
	float: right;
	text-align: right;
}
.order-details-one{
	height: 70rpx;
	width: 70%;
	background-color: darkred;
	float: left;
	line-height: 70rpx;
	display: block;
}
.order-details-two{
	height: 70rpx;
	width: 70%;
	background-color: skyblue;
	float: left;
	line-height: 70rpx;
	display: block;
}
.order-details-three{
	height: 70rpx;
	width: 70%;
	background-color: yellow;
	float: left;
	line-height: 70rpx;
	display: block;
}
.order-details-four {
  width: auto; /* 自动调整宽度以适应内容 */
  height: 180rpx;
  /* background-color: #FCC629; */
  float: right;
  line-height: 180rpx;  /* 确保高度适合文本 */
  margin-top: -130rpx; /* 调整垂直位置 */
  padding: 5rpx; /* 添加内边距 */
  color: #003CFF;
}
.order-footer-one{
	display: block;
	height: 120rpx;
	width: 40%;
	line-height: 120rpx;
	/* background-color: #470137; */
	text-align: left;
	float: left;
}
.order-footer-two{
	display: block;
	height: 120rpx;
	width: 60%;
	/* background-color: #ff6600; */
	float: right;
	text-align: center;
}
</style>
